<script setup>
import { ref, defineEmits } from "vue";

const getImg = (url) => {
  return new URL(`../../../assets/topology/${url}.png`, import.meta.url).href;
};

const emit = defineEmits(["tool-change"]);

const tools = ref([
  {
    icon: "icon1",
    iconChecked: "icon1A",
    text: "选择",
    name: "select",
    active: true,
  },
  {
    icon: "icon2",
    iconChecked: "icon2A",
    text: "连线",
    name: "line",
    active: false,
  },
  {
    icon: "icon3",
    iconChecked: "icon3A",
    text: "放大",
    name: "zoomin",
    active: false,
  },
  {
    icon: "icon4",
    iconChecked: "icon4A",
    text: "缩小",
    name: "zoomout",
    active: false,
  },
]);

function handleChange (name) {
  // 更新active状态
  tools.value.forEach(tool => {
    tool.active = tool.name === name;
  });

  // 触发事件
  emit("tool-change", name);
}
</script>

<template>
  <div class="tools">
    <div class="head">
      <img src="@/assets/images/drag.png" alt="" />
      <img src="@/assets/images/drag.png" alt="" />
    </div>
    <div class="tools-ul">
      <div class="item" v-for="(item, index) in tools" @click="handleChange(item.name)" :key="index">
        <img :src="item.active ? getImg(item.iconChecked) : getImg(item.icon)" alt="" />
        <div class="text" :style="{ color: item.active ? '#008aff' : '#fff' }">
          {{ item.text }}
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.tools {
  position: absolute;
  z-index: 11;
  right: 17px;
  bottom: 38px;
  width: 283px;
  height: 90px;
  background: #0a1c2a;
  border-radius: 0px 0px 0px 0px;
  border: 1px solid rgba(61, 115, 255, 0.3);

  .head {
    padding: 6px;
    display: flex;
    justify-content: space-between;

    img {
      width: 16px;
    }
  }

  .tools-ul {
    display: flex;
    justify-content: center;

    .item {
      padding: 0 18px;
      position: relative;
      cursor: pointer;

      img {
        width: 25px;
        height: 26px;
      }

      .text {
        font-weight: 400;
        font-size: 14px;
        line-height: 16px;
        margin-top: 8px;
        text-align: center;
      }
    }

    .item:not(:last-child)::after {
      content: "";
      position: absolute;
      right: 0;
      top: 50%;
      margin-top: -11px;
      display: block;
      width: 1px;
      height: 22px;
      background: #333;
    }
  }
}
</style>